<p-dialog header="设置字段状态映射"
  [(visible)]="visible"
  [modal]="true"
  [draggable]="true"
  [resizable]="false"
  [closable]="true"
  [dismissableMask]="true"
  [style]="{ width: '40rem' }">
  <div class="flex flex-column px-1 py-5 gap-4"
    *ngIf="item">
    <div class="inline-flex flex-column gap-2">
      <label for="Color"
        class="text-primary-50 font-semibold">颜色</label>
      <p-dropdown [options]="colors"
        [(ngModel)]="item.Color"
        optionLabel="Description"
        placeholder="选择颜色"
        optionValue="Color">
        <ng-template pTemplate="selectedItem">
          <div class="flex align-items-center gap-2"
            *ngIf="item.Color">
            <i class="pi pi-circle-fill"
              [title]="item.Color"
              [style]="{color:item.Color}"></i>
            <div>{{item.Color}} </div>
          </div>
        </ng-template>
        <ng-template let-color
          pTemplate="item">
          <div class="flex align-items-center gap-2">
            <i class="pi pi-circle-fill"
              [title]="color.Description"
              [style]="{color:color.Color}"></i>
            <div>{{color.Description}}</div>
          </div>
        </ng-template>
      </p-dropdown>
    </div>
    <div class="inline-flex flex-column gap-2">
      <label for="Key"
        class="text-primary-50 font-semibold">状态值</label>
      <p-inputNumber [(ngModel)]="item.Key"
        [showClear]="true"
        [required]="true"
        styleClass="p-inputtext-sm w-full"> </p-inputNumber>
    </div>
    <div class="inline-flex flex-column gap-2">
      <label for="Description"
        class="text-primary-50 font-semibold">描述</label>
      <input pInputText
        id="Description"
        [(ngModel)]="item.Description"
        [required]="true"
        class="w-full p-inputtext-sm" />
    </div>
  </div>
  <ng-template pTemplate="footer">
    <p-button icon="pi pi-check"
      (click)="onEditConfirm()"
      styleClass="p-button-sm"
      label="确定"
      pAutoFocus
      [autofocus]="true"></p-button>
    <p-button icon="pi pi-times"
      (click)="onEditCancel()"
      severity="secondary"
      styleClass="p-button-sm"
      label="取消"></p-button>
  </ng-template>
</p-dialog>